<!-- pages/index/index.vue -->
<template >
  <view class="content gradient-container">
		<view class="status_bar">
			<!-- 状态栏占位 -->
		</view>
		<view>
			<text class="hellow-time">
				{{time_show}}
			</text>
			<text style="font-size: 10%" class="hellow-time">{{time_show2}}</text>
			<text style="font-size: 10%;line-height:17pt;" class="hellow-time">{{admin_user}}</text>
		</view>
		<view class='bordered-view' style="height: 372rpx;">
			<text>图表占位</text>
		</view>
		<view>
			<view class="header-container">
				<view class="title-box">
				  <text class="title-text">今日交易</text>
				</view>
				<button class="more-button" @click="handleMoreClick(1)">更多</button>
			</view>
			 <uni-list class="record-list">
			      <uni-swipe-action>
			        <uni-swipe-action-item 
			          v-for="(item, index) in records" 
			          :key="index"

			        >
			          <uni-list-item 
			            :title="item.shopName" 
			            
			            :thumb="item.avatar"
			            :show-extra-icon="true"
			            :extra-icon="{type: 'arrowright'}"
			          >
			            <template v-slot:footer>
			              <view class="amount" style="font-size: 10pt;">
			                {{ formatAmount(item.amount) }}
			              </view>
<!-- 			              <uni-tag 
			                :text="item.status" 
			                :type="getStatusType(item.status)"
			                size="small"
			              ></uni-tag> -->
			            </template>
			          </uni-list-item>
			        </uni-swipe-action-item>
			      </uni-swipe-action>
			      </uni-list>
		</view>  
		<view>
			<view class="header-container">
				<view class="title-box">
				  <text class="title-text">待审核</text>
				</view>
				<button class="more-button" @click="handleMoreClick(2)">更多</button>
			</view>
			<uni-list class="record-list">
						  <uni-swipe-action>
					        <uni-swipe-action-item 
					          v-for="(item, index) in records" 
					          
					        >
						      <uni-list-item 
						        :title="item.shopName" 
						            
					            :thumb="item.avatar"
					            :show-extra-icon="true"
					            :extra-icon="{type: 'arrowright'}"
					          >
					            <template v-slot:footer>
									<text style="font-size: 10pt;">{{item.status}}</text>
					            </template>
					          </uni-list-item>
					        </uni-swipe-action-item>
					      </uni-swipe-action>
						  </uni-list>
		</view>
	</view>
</template>

<script>
export default {
  data() {
    return {
      time_show: '' ,
	  time_show2:'',
	  admin_user:'',
	  
    }
  },
  computed: {
    timeGreeting() {
      const hour = new Date().getHours();
      if (hour < 6) return '晚上好!';
      if (hour < 12) return '上午好!';
      if (hour < 18) return '下午好!';
      if (hour < 22) return '晚上好!';
	  return '晚上好!';
    },
    englishGreeting() {
      const hour = new Date().getHours();
      if (hour < 6) return 'Good night!';
      if (hour < 12) return 'Good morning!';
      if (hour < 18) return 'Good afternoon!';
      if (hour < 22) return 'Good evening!';
      return 'Good night!';
    },

  },
  created() {
    this.time_show = this.timeGreeting+"\n"; 
	this.time_show2=this.englishGreeting+"\n";
	this.admin_user='星光大道'+(1>0?"先生":"女士");
  }
}

</script>

<script setup>
import { ref, computed, unref } from 'vue'

const log=()=>{
	uni.login({
		provider:'weixin',
		success:(loging)=>{
			console.log(loging.code);
		}
	});
}
// 模拟数据
const records = ref([
  {
    shopName: '沃尔玛超市',
    avatar: '/static/shop-avatar1.jpg',
    amount: 1500.00,
	status:'待审核',
  },
  {
    shopName: '沃尔玛超市',
    avatar: '/static/shop-avatar2.jpg',
    amount: 800.00,
	status:'待审核',
  },
  {
    shopName: '沃尔玛超市',
    avatar: '/static/shop-avatar3.jpg',
    amount: 2300.50,
	status:'待审核',
  },
  {
    shopName: '沃尔玛超市',
    avatar: '/static/shop-avatar4.jpg',
    amount: 1200.00,
	status:'待审核',
  }
])
// 格式化金额
const formatAmount = (amount) => {
  return (amount > 0 ? '+' : '') + amount.toFixed(2)
}


const handleMoreClick=(index)=>{
	if (index===1){
		uni.navigateTo({
			
		})
	}
}


</script>
<style lang="scss">
.content {
  padding-bottom: 50px; 
  position: relative;
  top: 96pt;
}
uni-list-item{
	height: 52pt;
}
.gradient-container {
  top: 0pt;
  width: 100%;
  height: 100vh;
  background: linear-gradient(165deg, #e3f1ff 0%, #ffffff 30%);
  padding: 20rpx;
  box-sizing: border-box;
}
.bordered-view {
  border: 2px solid #f00; 
  border-radius: 8px; 
}
.title{
	height: 36pt;
	flex-direction: row;
	display:flex;
}
.status_bar{
		height: var(--status-bar-height);
		width:100%;
	}
.main-content {
  padding: 10px;
}
.container {
  padding: 20rpx;
}
.hellow-time{
	font-size: 300%;
	position: relative;
	left: 32pt; 
	
	}
.hellow-time2{
	left:37pt;
	top: 146pt;
}
	.header-container {
	  position: relative;
	  height: 72rpx; 
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  padding: 0 20rpx;
	  background-color: rgba(0,0,0,0);
	}
	
	.bordered-view {
	  flex: 1;
	  text-align: center;
	  border: 1px solid #e5e5e5;
	  border-radius: 8rpx;
	  padding: 10rpx 0;
	  background-color: #ffffff;
	  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
	}
	
	.title-text {
	  font-size: 32rpx;
	  font-weight: bold;
	  color: #333;
	}
	
	.more-button {
	  position: absolute;
	  right: 20rpx;
	  height: 40rpx; 
	  width: 48rpx; 
	  line-height: 40rpx;
	  font-size: 24rpx;
	  color: #007AFF;
	  background-color: transparent;
	  border: none;
	  padding: 0;
	  margin: 0;
	  
	  
	  &::after {
	    border: none;
	  }
	  
	 
	  &:active {
	    opacity: 0.6;
	  }
	}
.head_pohto{
	height: 32pt;
	width:32pt;
}

//列表样式
.container {
  padding-bottom: 80rpx;
}

.filter-section {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #fff;
  
  
  uni-segmented-control {
    flex: 1;
    margin-right: 20rpx;
  }
  
  uni-datetime-picker {
    width: 200rpx;
  }
}

.record-list {
  margin-top: 20rpx;
  
  .amount {
    font-weight: normal;
    margin-right: 20rpx;
	line-height: 22pt;
    font-family: 'DIN-Bold';
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 60vh;
  color: rgba(0,0,0,0);
  
  text {
    margin-top: 20rpx;
  }
}

.bottom-action {
  position: fixed;
  bottom: 30rpx;
  right: 30rpx;
  z-index: 999;
}
</style>
